<template>
  <Panel>
    <template #header> 编辑订单信息 </template>
    <template #con>
      <!-- 表单 -->
      <el-form ref="form" :model="editForm" label-width="110px">
        <ul>
          <li>
            <el-form-item label="订单号">
              <el-input v-model="editForm.orderNo"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="手机号">
              <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="收货人姓名">
              <el-input v-model="editForm.consignee"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="下单时间">
              <el-input v-model="editForm.orderTime"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="配送地址">
              <el-input v-model="editForm.deliverAddress"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="送达时间">
              <el-input v-model="editForm.deliveryTime"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="下单金额">
              <el-input v-model="editForm.orderAmount"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="订单状态" prop="orderState">
              <el-select v-model="editForm.orderState">
                <el-option label="已受理" value="已受理"></el-option>
                <el-option label="已派送" value="已派送"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="用户备注">
              <el-input type="textarea" v-model="editForm.remarks"></el-input>
            </el-form-item>
          </li>
        </ul>

        <el-form-item>
          <el-button type="primary" @click="editorder">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { getDetail, editOrder } from "../../api/orders.js";
import moment from "moment";

export default {
  created() {
    this.getdetail();
  },
  data() {
    return {
      id: this.$route.query.id,
      editForm: {},
    };
  },
  methods: {
    async getdetail() {
      const { data } = await getDetail({
        id: this.id,
      });
      this.editForm = data;
      this.editForm.deliveryTime = moment(data.deliveryTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.editForm.orderTime = moment(data.orderTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    },

    // 点击保存修改信息
    async editorder() {
      const data = await editOrder(this.editForm);
      if (data.code === 0) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        this.$router.push("/Order/list");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 800px;
  margin-left: 6%;

  ul {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
    }
  }
}
</style>